<template>
    <div class="centerBox">
        <div class="top">
            <dv-border-box-13>
                <div style="padding:20px;">
                    <div class="title">
                        <img src="../../../public/Government/icon.png" alt="">
                        <span>办件量TOPS</span>
                    </div>
                    <div class="secondTitle">
                        <span>当日办件事项排行</span>
                    </div>
                    <!-- 表格 -->
                    <div class="tableBox">
                        <table border="1" cellspacing="0" cellpadding="0" width="100%">
                            <thead style="background-color: #06235b;color: #408bd8;">
                                <tr>
                                    <th>排名</th>
                                    <th>办理事项</th>
                                    <th>所属部门</th>
                                    <th>办件量</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr align="center">
                                    <td>1</td>
                                    <td>这里是办理事项1</td>
                                    <td>社保局</td>
                                    <td>122</td>
                                </tr>
                                <tr align="center">
                                    <td>2</td>
                                    <td>这里是办理事项2</td>
                                    <td>人社局</td>
                                    <td>112</td>
                                </tr>
                                <tr align="center">
                                    <td>3</td>
                                    <td>这里是办理事项3</td>
                                    <td>药监局</td>
                                    <td>112</td>
                                </tr>
                                <tr align="center">
                                    <td>4</td>
                                    <td>这里是办理事项4</td>
                                    <td>交通局</td>
                                    <td>122</td>
                                </tr>
                                <tr align="center">
                                    <td>5</td>
                                    <td>这里是办理事项5</td>
                                    <td>教育局</td>
                                    <td>112</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="secondTitle">
                        <span>当月办件事项排行</span>
                    </div>
                    <!-- 表格 -->
                    <div class="tableBox">
                        <table border="1" cellspacing="0" cellpadding="0" width="100%">
                            <thead style="background-color: #06235b;color: #408bd8;">
                                <tr>
                                    <th>排名</th>
                                    <th>办理事项</th>
                                    <th>所属部门</th>
                                    <th>办件量</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr align="center">
                                    <td>1</td>
                                    <td>这里是办理事项1</td>
                                    <td>社保局</td>
                                    <td>122</td>
                                </tr>
                                <tr align="center">
                                    <td>2</td>
                                    <td>这里是办理事项2</td>
                                    <td>人社局</td>
                                    <td>112</td>
                                </tr>
                                <tr align="center">
                                    <td>3</td>
                                    <td>这里是办理事项3</td>
                                    <td>药监局</td>
                                    <td>112</td>
                                </tr>
                                <tr align="center">
                                    <td>4</td>
                                    <td>这里是办理事项4</td>
                                    <td>交通局</td>
                                    <td>122</td>
                                </tr>
                                <tr align="center">
                                    <td>5</td>
                                    <td>这里是办理事项5</td>
                                    <td>教育局</td>
                                    <td>112</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </dv-border-box-13>
        </div>
        <div class="bottom">
            <dv-border-box-13>
                <div style="padding:20px;">
                    <div class="title">
                        <img src="../../../public/Government/icon.png" alt="">
                        <span>近15日办件趋势</span>
                    </div>
                    <!-- 图表 -->
                    <div class="chartBox">
                        <div id="chart" style="width: 100%; height: 210px;"></div>
                    </div>

                </div>
            </dv-border-box-13>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
onMounted(() => {
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            axisLabel: {
                color: '#80c0e0'
            },
            // 去除刻度线
            axisTick: {
                show: false
            }

        },
        yAxis: {
            type: 'value',
                nameTextStyle: {
                    color: '#80c0e0' // 单位颜色
                },
                // 坐标轴范围
                min: 0,
                max: 400,
                // 坐标轴线条颜色
                axisLine: {
                    lineStyle: {
                        color: '#80c0e0'
                    }
                },
                // 刻度文字颜色
                axisLabel: {
                    color: '#80c0e0'
                },
                splitLine: {
                    lineStyle: {
                        color: '#80c0e0',
                        type: 'dashed'
                    }
                },
                // 去除刻度线
                axisTick: {
                    show: false
                }
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },

        series: [
            {
                data: [130, 220, 190, 310, 280, 170, 180, 220, 320, 180, 320, 90, 140, 330, 220],
                type: 'line',
                    // 折线样式（浅紫色）
                    lineStyle: {
                        color: '#d0b0f0',
                        width: 2
                    },
                    symbol: 'circle', 
                    symbolSize: 8, 
                    itemStyle: {
                        color: '#d0b0f0' // 标记颜色
                    }
            }
        ]
    };

    option && myChart.setOption(option);
})

</script>

<style lang="scss" scoped>
.title {
    width: 30%;
    display: flex;
    align-items: center;
    background-color: #052e63;
    border-radius: 50px 15px 0 50px;

    img {
        width: 35px;
        height: 40px;
    }

    span {
        display: block;
        padding: 10px;
        font-weight: bold;
        color: white;
    }

}

.centerBox {
    padding: 15px;
    width: 100%;

    table {
        border-color: #014c73;

        tr {
            height: 36px;
        }
    }

    .top {
        width: 100%;
        background-color: #07164ebe;

        span {
            font-size: 19px;
        }

        .secondTitle {
            margin: 15px 0;

            span {
                font-size: 17px;
                padding-left: 10px;
                border-left: 8px solid #02a7f0;
                color: #77c5eb;
            }
        }
    }

    .bottom {
        width: 100%;
        background-color: #07164ebe;
        margin-top: 20px;
        height: 270px;

        span {
            font-size: 19px;
        }

    }
}
</style>